import '@css/shop.css'
var aImgs = document.querySelectorAll('.container img');
var aLis = document.querySelectorAll('.container li');
var btnLeft = document.querySelector('.container .left');
var btnRight = document.querySelector('.container .right');
//点击事件
//点击按钮图片切换
var index = 0;        //当前图片下标
var lastIndex = 0;
btnRight.onclick = function () {
    //记录上一张图片的下标
    lastIndex = index;
    //清除上一张图片的样式
    aImgs[lastIndex].className = '';
    aLis[lastIndex].className = '';
    index++;
    index%= aImgs.length;    //实现周期性变化
    //设置当前图片的样式
    aImgs[index].className = 'on';
    aLis[index].className = 'active';
}
//左边按钮类似
btnLeft.onclick = function () {
    //记录上一张图片的下标
    lastIndex = index;
    //清除上一张图片的样式
    aImgs[lastIndex].className = '';
    aLis[lastIndex].className = '';
    index--;
    if (index < 0) {
        index = aImgs.length - 1;
    }
    //设置当前图片的样式
    aImgs[index].className = 'on';
    aLis[index].className = 'active';
}
// 选项卡js
const ele = document.getElementById('ele')
const tap = ele.getElementsByTagName('li')
const elec = document.getElementsByClassName('elec')

for (let i = 0; i < tap.length; i++) {
    tap[i].key = i
    tap[i].onclick = function () {
        let key = this.key
        for (let k = 0; k < elec.length; k++) {
            elec[k].style.display = 'none'
            if (key == k) {
                elec[k].style.display = 'block'
            }
        }
    }
}

